{% extends 'layout.html' %}
{% load static %}


{% block css %}
    <link rel="stylesheet" href={% static 'plugins/bootstrap-datepicker.min.css' %}>
{% endblock %}

{% block content %}

    <div class="container">

        <div class="panel panel-default">
            <div class="panel-heading">新建任务</div>
            <div class="panel-body">
                <form id="formAdd">
                    <div class="clearfix">
                        {% for item in uform %}
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative;margin-bottom: 30px">
                                    {{ item.label }}
                                    {{ item }}
                                    <sapn class="error-msg"
                                          style="color: red;position: absolute">{{ item.errors.0 }}</sapn>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-xs-12">
                            <input type="button" id="btnAdd" class="btn btn-primary" value="提交">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <hr/>


        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
                任务列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>等级</th>
                    <th>标题</th>
                    <th>时间</th>
                    <th>详细信息</th>
                    <th>负责人</th>
                </tr>
                </thead>
                <tbody>
                {% for item in queryset %}
                    <tr>
                        <th>{{ item.id }}</th>
                        <td>{{ item.level }}</td>
                        <td>{{ item.title }}</td>
                        <td>{{ item.create_time|date:"Y-m-d" }}</td>
                        <td>{{ item.detail }}</td>
                        <td>{{ item.user.username }}</td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
        <ul class="pagination">
            {{ page_string }}
            <li style="margin-left: 15px">

                <form method="get" style="float: left;margin-left: -1px">
                    <div class="input-group" style="width: 100px">
                        <input type="text" name="page"
                               style="position: relative;float: left;display: inline-block;width:100px;border-radius: 0"
                               class="form-control" placeholder="页码">
                        <span class="input-group-btn">
                    <button style="border-radius: 0" class="btn btn-default" type="submit">跳转</button>
                </span>
                    </div>

                </form>
            </li>
        </ul>


        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"> </span>
                Ajax请求任务列表
            </div>
            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>等级</th>
                    <th>标题</th>
                    <th>时间</th>
                    <th>详细信息</th>
                    <th>负责人</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th>{{ item.id }}</th>
                    <td>{{ item.level }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.create_time|date:"Y-m-d" }}</td>
                    <td>{{ item.detail }}</td>
                    <td>{{ item.user.username }}</td>

                </tr>
                </tbody>
            </table>
        </div>

        <hr/>
        <h1>Ajax学习</h1>
        <h3>示例1</h3>
        {% csrf_token %}
        <input type="button" class="btn btn-primary" value="点击get请求" onclick="clikMe1();">
        <input type="button" class="btn btn-primary" value="点击post请求" onclick="clikMe2();">
        <input id="btn1" type="button" class="btn btn-primary" value="jquery点击事件1">
        <h3>示例2</h3>
        <input id="txtUser" type="text" placeholder="用户名">
        <input id="txtAge" type="text" placeholder="年龄">
        <input id="btn2" type="text" class="btn btn-primary" value="jquery点击提交事件2">
        <h3>示例3</h3>
        <form id="form3">
            <input id="txtUser" name="user" placeholder="用户名">
            <input id="txtAge" name="age" placeholder="年龄">
            <input id="txtEmail" name="email" placeholder="邮箱">
            <input id="txtMore" name="more" placeholder="介绍">
        </form>
        <input id="btn3" type="text" class="btn btn-primary" value="jquery点击提交事件3">
    </div>

{% endblock %}

{% block  js %}
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            $.ajax({
                url: '{% url "task_list" %}',
                method: 'post',
                dataType: 'JSON',
                success: function (res) {
                    console.log("111111111" + res)
                    console.log(res)
                }
            })
        })

        function clikMe1() {
            console.log("点击了按钮")
            $.ajax({
                url: '{% url "task_ajax" %}',
                method: 'get',
                data: {
                    n1: '123',
                    n2: '123'
                },
                success: function (res) {
                    {#console.log(res)#}
                }
            })
        }

        function clikMe2() {
            console.log("点击了按钮")
            $.ajax({
                url: '{% url "task_ajax" %}',
                method: 'post',
                data: {
                    n1: '123',
                    n2: '123'
                },
                success: function (res) {
                    {#console.log(res)#}
                }
            })
        }

        //页面框架加载完成后代码自动执行
        $(function () {
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();
            bindbtnAddEvent();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '{% url "task_ajax" %}',
                    method: 'post',
                    data: {
                        n1: '123',
                        n2: '123'
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        console.log(res.code)
                        console.log(res.data)
                    }
                })
            })
        }

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '{% url "task_ajax" %}',
                    method: 'post',
                    data: {
                        txtUser: $('#txtUser').val(),
                        txtAge: $('#txtAge').val(),
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        console.log(res.code)
                        console.log(res.data)
                    }
                })
            })
        }

        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                    url: '{% url "task_ajax" %}',
                    method: 'post',
                    data: $('#form3').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res)
                        console.log(res.code)
                        console.log(res.data)
                    }
                })
            })
        }

        function bindbtnAddEvent() {

            $("#btnAdd").click(function () {

                $('.error-msg').empty()

                $.ajax({
                    url: '{% url "task_add" %}',
                    method: 'post',
                    data: $('#formAdd').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code === 200) {
                            alert("添加成功！")
                            location.reload();
                        } else {
                            {#alert(res.error())#}
                            $.each(res.error, function (name, data) {
                                console.log(name, data)
                                $('#id_' + name).next().text(data[0])
                            })
                        }
                    }
                })
            })
        }


    </script>


    <script src="{% static 'plugins/bootstrap-datepicker.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datepicker.zh-CN.min.js' %}"></script>

    <script>
        $(function () {
            $('#id_create_time').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0d',
                language: 'zh-CN',
                autoclose: true
            })
        })
    </script>
{% endblock %}

